<template>
  <div class="main" style="margin-left: 10px">
    <el-card class="decision">
      <!-- 标题 -->
      <div class="title">学校决策</div>
      <el-row>
        <div class="school-idea header">一、学院意见</div>
      </el-row>
      <el-row>
        <div
          style="
            widows: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
          "
        >
          <span style="margin-right: 20px">{{
            personnel.college_import == 1 ? "建议引进" : "不建议引进"
          }}</span>
          <el-link
            class="link"
            :underline="false"
            type="primary"
            @click="handlePreview"
          >点击查看学院意见</el-link>
        </div>
      </el-row>
      <!-- 表格标题 -->
      <el-row>
        <div class="header">二、专家学术评价情况（得票数/专家数）</div>
      </el-row>
      <!-- 列标题 -->
      <el-row class="sub-header">
        <el-col :span="6">科研与学术水平 </el-col>
        <el-col :span="6">创新与发展潜力 </el-col>
        <el-col :span="6">竞争力与社会影响力 </el-col>
        <el-col :span="6">综合评价 </el-col>
      </el-row>
      <!-- 评价选项内容 -->
      <el-row v-for="(item, index) in keyMenu" :key="index" class="body">
        <el-col :span="6">
          <div>
            <div>{{ item }}（{{ census.level[item].census }}）</div>
            <div>{{ census.level[item].name.join("、") }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <div>{{ item }}（{{ census.potential[item].census }}）</div>
            <div>{{ census.potential[item].name.join("、") }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <div>{{ item }}（{{ census.effect[item].census }}）</div>
            <div>{{ census.effect[item].name.join("、") }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <div>{{ item }}（{{ census.multiple[item].census }}）</div>
            <div>{{ census.multiple[item].name.join("、") }}</div>
          </div>
        </el-col>
      </el-row>
      <!-- 引进 -->
      <el-row class="introduce">
        <el-col :span="12">是否建议引进</el-col>
        <el-col :span="12">
          <div class="support">
            <div>是（{{ census.introduction["是"].census }}）</div>
            <div style="margin-top: 10px; font-weight: 400">
              {{ census.introduction["是"].name.join("、") }}
            </div>
          </div>
          <div class="oppose">
            <div>否（{{ census.introduction["否"].census }}）</div>
            <div style="margin-top: 10px; font-weight: 400">
              {{ census.introduction["否"].name.join("、") }}
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 专家信息表格 -->
      <el-row class="specialist-header">
        <el-col :span="6">专家姓名 </el-col>
        <el-col :span="6">学术头衔 </el-col>
        <el-col :span="6">所在单位 </el-col>
        <el-col :span="6">专家意见或建议 </el-col>
      </el-row>
      <el-row
        v-for="(item, index) in expertList"
        :key="index + 'specialist'"
        class="specialist-body"
        style="min-height:4vh"
      >
        <el-col :span="6">{{ item.name }}</el-col>
        <el-col :span="6">{{ item.learning }} </el-col>
        <el-col :span="6">{{ item.company }} </el-col>
        <el-col :span="6">{{ item.opinion }} </el-col>
      </el-row>
    </el-card>
    <!-- 决策意见 -->
    <el-card class="school-idea">
      <!-- 标题 -->
      <!-- template -->
      <div class="title">
        <span>三、决策意见</span>
        <span style="color:#fa3534;font-size:12px;font-weight:500;margin-left: .3vw;">备注 ：(必选，请在相应的“○”打“√”)</span>
      </div>
      <!-- 意见选项 -->
      <div class="evaluate-list">

          <!-- 当前选项标题 -->
          <!-- item.title === '岗位等级'
              ? evaluateOption[2].currentValue <= 3
                ? item.option.splice(0, 3)
                : item.option.splice(3, 3)
              :  -->
        <!-- <div
          v-for="(item, index) in evaluateOption"
          :key="index"
          class="evaluate-item"
          :class="'radio'+index"
        >
          
          <div class="name">{{ item.title }}：</div>
          <div
            v-for="(optionItem, optionIndex) in item.option"
            :key="optionIndex"
            class="option-item"
            
            @click="changeEvaluate(index, optionIndex)"
          >
           
            <MyIcon
              :icon="item.currentValue === optionItem.value ? 'bi:check-circle-fill' : 'akar-icons:circle' "
              style="color: #2960c4;" 
            />
           
            <span
              class="
              label"
            >{{ optionItem.label }}</span>
          </div>

          <div v-if="index==4" class="yulan" @click="$emit('handlePreview1',personnel.spouse_resume)"><i class="el-icon-view el-icon--right" />预览配偶简历</div> 
        </div> -->
       

       <div>
        <div style="display:flex;align-items: center;justify-content: flex-start;margin: 2vh 0;color: #333 !important;font-weight:400;font-size: 16px;">
          <div >是否同意引进 :</div>
          <el-radio-group v-model="isTrue" style="margin-left:1vw;">
            <el-radio :label="3" @change="ischanges_(1)" style="margin:0 1.5vw">是</el-radio>
            <el-radio :label="6" @change="ischanges_(2)" style="margin:0 1.5vw">否</el-radio>
          </el-radio-group>
        </div>
        <div v-for="(item,index) in evaluateOption_Map" :key="index*2" style="display:flex;align-items: center;justify-content: flex-start;color: #333 !important;font-weight:400;font-size: 16px;">
          <div style="margin:2vh 0;">{{item.title}} :</div>
          <el-radio-group v-model="radio[index]"  v-for="(items,indexs) in item.option" :key="indexs" style="margin-left:1vw;">
            <el-radio  :disabled="is_disabled" @change="changes_(index,items.value)" :label="items.value" style="margin:0 1.5vw">{{items.label}}</el-radio>
          </el-radio-group>
        </div>
       </div>

       <!-- 重写 -->
          <!-- <div
          v-for="(item, index) in evaluateOption"
          :key="index"
          class="evaluate-item"
          
        >
          
          <div class="name">{{ item.title }}：</div>
         <el-radio-group v-model="radio['radio'+index]" >
            <el-radio v-for="(optionItem, optionIndex) in item.option"
              :key="optionIndex" 
              :label="optionItem.value"
              @change="changeEvaluate(index, optionIndex)"
              >
                {{optionItem.label}}
                
            </el-radio>
        </el-radio-group>
            
          <div v-if="index==4" class="yulan" @click="$emit('handlePreview1',personnel.spouse_resume)"><i class="el-icon-view el-icon--right" />预览配偶简历</div> 
        </div> -->


      </div>
      <!-- 学校标准 -->
      <el-row :span="24">
        <el-row :span="24">
          <el-col :span="4" />
          <el-col :span="6">年薪</el-col>
          <el-col :span="8">安家费</el-col>
          <el-col :span="6">科研启动费</el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="4">学校标准：</el-col>
          <el-col :span="6">{{ treatment.year_salary }} </el-col>
          <el-col :span="8">{{ treatment.settle_down }} </el-col>
          <el-col :span="6">{{ treatment.startup }} </el-col></el-row>
      </el-row>
      <!-- 个人诉求 -->
      <el-row class="appeal">
        <el-col :span="4">个人诉求：</el-col>
        <el-col :span="6">{{ personnel.year_salary }} </el-col>
        <el-col :span="8">{{ personnel.settle_down }} </el-col>
        <el-col :span="6">{{ personnel.startup }} </el-col>
      </el-row>
      <!-- 费用建议 -->
      
      <el-row class="appeal">
        <el-col :span="4">决策建议：</el-col>
        <div class="input1" style="display:flex">
        <el-row  v-for="(item, index) in moneyOption" :key="index" class="appeal">
          <el-col :span="5" style="padding-left: 10px;">
            <el-input v-model="item.suggestNumber" :disabled="is_disabled" placeholder="请输入金额/万" style="width:130px" />
          </el-col>
          
        </el-row>
        </div>
       

      </el-row>
      <!-- this.$emit('refresh') -->
      <!-- <div class="spouse_resume" style="color:red" @click="handlePreview(personnelDetail.spouse_resume)">预览配偶</div> -->
      <div class="tip">
        <span>注：</span>
        <span>决策意见将作为学校与引聘对象对接洽谈的参考值</span>
      </div>
      <div class="title" style="margin-top: 25px; margin-bottom: 15px">
        四、对引进人才的意见、建议或对西南交通大学{{
          personnel.apply_college
        }}学科发展的意见或建议（如有请填写）
      </div>
      <!-- 发展建议输入框 -->
      <el-input
        :disabled="is_disabled"
        v-model="form.opinion"
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10 }"
        placeholder="请输入内容"
      />

      <div class="btn-wrap">
        <div class="btn-group">
          <div class="save btn" @click="handleSave(1)">保存</div>
          <!-- <div class="preview btn">预览</div> -->
          <div class="submit btn" @click="handleSave(2)">提交</div>
        </div>
      </div>
    </el-card>
    <el-dialog
      width="80%"
      title="学院意见"
      :visible.sync="innerVisible"
      append-to-body
    >
      <img class="idea-img" :src="baseUrl + personnel.college_opinion" alt="">
    </el-dialog>
  </div>
</template>

<script>
import config from './config'
import {
  saveJudgeEvaluate,
  submitJudgeEvaluate,
  getJudgeEvaluateInfo
} from '@/api/personnel'
import MyIcon from '@/components/MySvg'
export default {
  components: {
    MyIcon
  },
  props: {
    census: {
      type: Object,
      default () {
        return {}
      }
    },
    expertList: {
      type: Array,
      default () {
        return []
      }
    },
    personnel: {
      type: Object,
      default () {
        return {}
      }
    },
    treatment: {
      type: Object,
      default () {
        return {}
      }
    },
    personnelId: {
      type: String,
      default: ''
    },
    
  },
  data () {
    return {
      isTrue:[],
      radio:[],
      is_disabled:false,
      innerVisible: false,
      // 评价选项数据
      evaluateOption: JSON.parse(JSON.stringify(config.evaluateOption)),
      evaluateOption_Map:[],
      // 经费选项
      moneyOption: config.moneyOption,
      // 发展建议
      suggestValue: '',
      baseUrl: process.env.VUE_APP_BASE_API,
      keyMenu: ['优秀', '良好', '中等', '一般'],
      form: {
        personnel_id: '',
        introduction: '',
        maintain: '',
        grade: '',
        seniority: '',
        spouse: 0,
        year_salary: 0,
        year_salary_proposal: '',
        settle_down: 0,
        settle_down_proposal: '',
        startup: 0,
        startup_proposal: '',
        opinion: ''
      },
      
      
    }
  },
  created () {
      const a = this.evaluateOption.map((item,index)=>{
        return item
      })
       const b = this.evaluateOption.map((item,index)=>{
          // return item.options
            return item.currentValue
      })
      console.log("111",this.evaluateOption,);
      this.radio = b
      this.evaluateOption_Map = a.slice(1)


      
    // this.radio.radio1=this.evaluateOption[0].currentValue
    // this.radio.radio2=this.evaluateOption[1].currentValue
    // this.radio.radio3=this.evaluateOption[2].currentValue
    // this.radio.radio4=this.evaluateOption[3].currentValue
    // this.radio.radio5=this.evaluateOption[4].currentValue
    // 关闭配偶信息填写
    if (this.personnel.spouse === 0) {
      this.evaluateOption.pop()
    }
    this.getJudgeEvaluateInfo(this.personnel.id)
    // this.getJudgeEvaluateInfo(8)
  },
  methods: {
    changes_(data, index,){
      console.log('第',data+1,'行','==>','第',index,'个')


    },
    //选中否
    ischanges_(data){
      console.log(data,)
        if(data==2){
          this.is_disabled = true
        }else{
          this.is_disabled = false
        }
    },

    // 改变评价选中
    changeEvaluate (index, optionIndex) {
      console.log("999",index, optionIndex);
      if(index==0&&optionIndex==1){
        console.log("否");
      }
      const value = this.evaluateOption[index].option[optionIndex].value
      this.evaluateOption[index].currentValue = value
      switch (index) {
        case 0:
          this.form.introduction = value
          break
        case 1:
          if (value <= 2) {
            this.evaluateOption[2].option[0].label = '二级'
            this.evaluateOption[2].option[1].label = '三级'
            this.evaluateOption[2].option[2].label = '四级'
            // this.evaluateOption[2].option = JSON.parse(
            //   JSON.stringify(config.evaluateOption)
            // )[2].option.splice(0, 3)
          } else {
            this.evaluateOption[2].option[0].label = '五级'
            this.evaluateOption[2].option[1].label = '六级'
            this.evaluateOption[2].option[2].label = '七级'
            // this.evaluateOption[2].option = JSON.parse(
            //   JSON.stringify(config.evaluateOption)
            // )[2].option.splice(3, 3)
          }
          this.form.maintain = value
          break
        case 2:
          this.form.grade = value
          break
        case 3:
          this.form.seniority = value
          break
        case 4:
          this.form.spouse = value
          break
        default:
          break
      }
    },
    // 改变经费选中
    changeMoney (index, optionIndex) {
      // 当前选中的下标
      // this.moneyOption[index].currentIndex = optionIndex
      // 保存当前选项的value
      const value = this.moneyOption[index].option[optionIndex].value
      this.moneyOption[index].currentValue = value

      // 选择为同意时清空输入的金额
      if (this.moneyOption[index].currentValue === 0) {
        this.moneyOption[index].suggestNumber = ''
      }
      switch (index) {
        case 0:
          this.form.year_salary = value
          break
        case 1:
          this.form.settle_down = value
          break
        case 2:
          this.form.startup = value
          break
        default:
          break
      }
    },
    // 保存信息
    async saveJudgeEvaluate () {
      console.log("提交",this.form);
      await saveJudgeEvaluate(this.form)
      this.$message.success('保存成功')
      this.$emit('refresh')
    },
    // 提交信息
    async submitJudgeEvaluate () {
      await submitJudgeEvaluate(this.form)
      this.$message.success('提交成功')
      this.$emit('refresh')
    },
    // 获取评委保存的信息
    async getJudgeEvaluateInfo (personnel_id) {
      const res = await getJudgeEvaluateInfo({ personnel_id })
      if (res.data) {
        this.form = res.data
        this.evaluateOption[0].currentValue = this.form.introduction
        this.evaluateOption[1].currentValue = this.form.maintain
        this.evaluateOption[2].currentValue = this.form.grade
        this.evaluateOption[3].currentValue = this.form.seniority
        this.evaluateOption[4].currentValue = this.form.spouse
        this.moneyOption[0].currentValue = this.form.year_salary
        this.moneyOption[0].suggestNumber = this.form.year_salary_proposal
        this.moneyOption[1].currentValue = this.form.settle_down
        this.moneyOption[1].suggestNumber = this.form.settle_down_proposal
        this.moneyOption[2].currentValue = this.form.startup
        this.moneyOption[2].suggestNumber = this.form.startup_proposal

        if (this.evaluateOption[2].currentValue <= 2) {
          this.evaluateOption[2].option[0].label = '二级'
          this.evaluateOption[2].option[1].label = '三级'
          this.evaluateOption[2].option[2].label = '四级'
        } else {
          this.evaluateOption[2].option[0].label = '五级'
          this.evaluateOption[2].option[1].label = '六级'
          this.evaluateOption[2].option[2].label = '七级'
        }
      }
    },
    handleSave (type) {
      const { introduction, maintain, grade, seniority, spouse } = this.form
      console.log(introduction);
      
      
      if (
        introduction === '' ||
        maintain === '' ||
        grade === '' ||
        seniority === '' ||
        spouse === ''
      ) {
        return this.$message.error('决策意见勾选不完整')
      }
      this.form.personnel_id = this.personnelId
      this.form.year_salary_proposal = this.moneyOption[0].suggestNumber
      this.form.settle_down_proposal = this.moneyOption[1].suggestNumber
      this.form.startup_proposal = this.moneyOption[2].suggestNumber
      if(introduction==0){
        this.form.maintain=""
        this.form.grade=""
        this.form.seniority=""
        this.form.spouse="3"
        this.form.year_salary_proposal=""
        this.form.settle_down_proposal=""
        this.form.startup_proposal=""
      }
      console.log("this.form",this.form);
      switch (type) {
        case 1:
          this.saveJudgeEvaluate()
          break
        case 2:
          this.submitJudgeEvaluate()
          break
        default:
          break
      }
    },
    handlePreview () {
      this.innerVisible = true
    },
    // handlePreview1 (path) {
    //   const fileUrl = process.env.VUE_APP_BASE_API + path
    //   if (fileUrl.indexOf('.pdf') !== -1) { return window.open(fileUrl, '_target') }

    //   const url = encodeURIComponent(fileUrl)
    //   const officeUrl =
    //     'http://view.officeapps.live.com/op/view.aspx?src=' + url
    //   window.open(officeUrl, '_target')
    // }
  }
}
</script>

<style lang="scss" scoped>
// .el-row {
//   display: flex;
//   flex-wrap: nowrap;
// }
.radio0{
  display: none;
}
.radio1{
  display: none;
}
.radio2{
  display: none;
}
.radio3{
  display: none;
}
.decision {
  .title {
    min-height: 45px;
    text-align: center;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }

  .el-row {
    display: flex;
    border: 1px solid #333;
    border-bottom: none;
    &:nth-last-child(1) {
      border-bottom: 1px solid #333;
    }
    .header {
      text-align: center;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      height: 40px;
      line-height: 40px;
      width: 100%;
      background-color: #e9eff9;
    }
    .el-col {
      text-align: center;
      border-right: 1px solid #333;
      &:nth-last-child(1) {
        border-right: none;
      }
    }
    &.sub-header {
      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
        min-height: 60px;
        // line-height: 40px;
      }
    }
    &.body {
      font-size: 16px;
      .el-col {
        padding: 1vw;
        display: flex;
        // flex-direction: column;
        justify-content: center;
        // min-height: 70px;

        // line-height:5h ;
        height: 100%;
        div:nth-child(2) {
          // min-height: 70px;
          line-height: 3vh;
          // color: #ff0913;
          margin-top: 0px;
        }
        // line-height: 70px;
      }
    }
    &.introduce {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      border-bottom: 1px solid #333;
      // line-height: 70px;
      .el-col {
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        &:nth-child(1) {
          line-height: 70px;
        }
        &:nth-child(2) {
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
    &.specialist-header {
      margin-top: 8px;
      // line-height: 40px;
      // height: 50vh;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        
      }
    }
    &.specialist-body {
      // min-height: 100px;
      // line-height: 40px;
      font-size: 16px;
      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        // min-height: 60px !important;
        &:nth-child(n + 2) {
          // color: #ff0913;
        }
      }
    }
  }
}

.school-idea {
  margin-top: 10px;
  .title {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #2960c4;
  }
  .evaluate-list {
    margin-top: 12px;
    margin-bottom: 20px;

    .evaluate-item {
      display: flex;
      align-items: center;
      height: 40px;
      .name {
        min-width: 160px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #333333;
      }
      .option-item {
        display: flex;
        align-items: center;
        margin-right: 67px;
        cursor: pointer;
        .icon {
          display: block;
          position: relative;
          width: 18px;
          height: 18px;
          border: 1px solid #2960c4;
          border-radius: 50%;
          flex-shrink: 0;
          &.active::after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background-color: #2960c4;
            border-radius: 50%;
          }
        }
        .label {
          flex-shrink: 0;
          margin-left: 4px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
  .el-row {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #ffffff;
    // height: 100px;
    background-color: #f28e02;
    .el-row {
      .el-col {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
      }
      &:nth-child(2) {
        .el-col:nth-child(1) {
          // font-weight: 400;
        }
        .el-col:nth-child(2),
        .el-col:nth-child(3) {
          font-size: 18px;
        }
        .el-col:nth-last-child(1) {
          // font-weight: 400;
        }
      }
    }
    &.appeal {
      margin-top: 7px;
      background-color: #2860c3;
      font-size: 18px;

      .el-col {
        text-align: center;
        height: 100px;
        line-height: 100px;
        &:nth-child(1) {
          // font-weight: 400;
        }
      }
    }
    &.money {
      margin-top: 7px;
      .el-row {
        background-color: #36ae48;
        .el-col {
          .item {
            display: flex;
            align-items: center;
            padding-left: 20px;
            text-align: inherit;
            cursor: pointer;
            .icon {
              position: relative;
              display: block;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              background-color: #fff;
              &.active::after {
                display: block;
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 10px;
                height: 10px;
                background-color: #36ae48;
                border-radius: 50%;
              }
            }
            span {
              margin-left: 7px;
            }
          }
        }
      }
    }
  }

  .tip {
    margin-top: 15px;
    span:nth-child(1) {
      // color: #ff0913;
      font-size: 16px;
      font-weight: 500;
    }
    span:nth-child(2) {
      color: #666666;
      font-family: MicrosoftYaHei;
    }
  }

  .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    .btn-group {
      display: flex;
      align-items: center;
      .btn {
        margin-right: 10px;
        width: 150px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: #f28e02;
        border-radius: 3px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
      }
      .preview {
        background-color: #6759f1;
      }
      .submit {
        background-color: #36ae48;
      }
    }
  }
}

.idea-box {
  align-items: center;
  margin-left: 15px;
  margin-bottom: 10px;
  ::v-deep.el-card__body {
    display: flex;
  }
}
.link {
  height: 40px;
  margin-left: 10px;
}
.school-idea {
  // align-items: center;
  font-size: 18px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #2960c4;
  margin-top: 0;
}
.idea-img {
  width: 100%;
  height: 1005;
}
.main {
  position: sticky;
  top: 0;
}
.input1{
  display: flex;
  justify-content: space-around;
}
// .appeal{
//   .el-col{
//     text-align: center;
//   }
// }
// .input1{
//   .el-row{
//     .el-col{

//     }
//   }
// }
.yulan{
  font-size: 15px;
}

</style>
